<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" type="image/ico" href="jianli.ico"/>
    <title>个人简历</title>
    <style>
        html,
        body {
            font-size: 10px;
            padding: 0;
            margin: 0;
            color: #fff;
            font-family: "宋体";
        }

        h1 {
            padding: 0;
            margin: 0;
        }

        .header {
            background-image: url("images/9.jpg");
            height: 70rem;
            background-repeat: no-repeat;
            background-size: cover;
        }

        .header h1 {
            margin: 0 auto;
            padding: 0;
            font-size: 5rem;
            color: #fff;
            padding-top: 1rem;
            display: block;
            width: 11rem;
            height: 5rem;
        }

        .header .p1 {
            width: 68rem;
            height: 13.5rem;
            background-color: #5D7FAB;
            font-size: 7rem;
            line-height: 13.5rem;
            text-align: center;
            margin-left: 13rem;
            margin-bottom: 3rem;
            margin-top: 25rem;
        }

        .header .p2 {
            width: 57rem;
            height: 5rem;
            background-color: #6C859F;
            margin-left: 13rem;
            font-size: 3rem;
            line-height: 5rem;
            text-align: center;
        }

        .content {
            background-color: #FFC907;
        }

        .content .top {
            margin: 0 auto;
            width: 3.2rem;
            height: 2.6rem;
            background-image: url("images/down.png");
            background-repeat: no-repeat;
        }

        .content h1 {
            font-size: 5rem;
            width: 20.4rem;
            margin: 0 auto;
            margin-top: 6rem;
        }

        .content h2 {
            padding: 0;
            margin: 0;
            font-family: "黑体";
            font-size: 2rem;
        }

        .content .main_box1 {
            width: 45rem;
            height: 2rem;
            background-color: #fff;
            border-radius: 0.5rem;
            margin: 2rem 0rem;
        }

        .content .main_bg {
            float: left;
            margin-right: 3rem;
            margin-top: 6rem;
        }

        .content .main2 {
            float: left;
            margin-top: 6rem;
        }

        .main_box1_html {
            width: 40rem;
            height: 2rem;
            background-color: #1B242F;
            border-radius: 0.5rem 0rem  0rem 0.5rem;
        }

        .main_box1_css {
            width: 42rem;
            height: 2rem;
            background-color: #1B242F;
            border-radius: 0.5rem 0rem  0rem 0.5rem;
        }

        .main_box1_js {
            width: 30rem;
            height: 2rem;
            background-color: #1B242F;
            border-radius: 0.5rem 0rem  0rem 0.5rem;
        }

        .main_box1_php {
            width: 20rem;
            height: 2rem;
            background-color: #1B242F;
            border-radius: 0.5rem 0rem  0rem 0.5rem;
        }

        .main_box1_vue {
            width: 41rem;
            height: 2rem;
            background-color: #1B242F;
            border-radius: 0.5rem 0rem  0rem 0.5rem;
        }

        .main_box1_html5 {
            width: 38rem;
            height: 2rem;
            background-color: #1B242F;
            border-radius: 0.5rem 0rem  0rem 0.5rem;
        }

        .main_box1_jquery {
            width: 35rem;
            height: 2rem;
            background-color: #1B242F;
            border-radius: 0.5rem 0rem  0rem 0.5rem;
        }

        .main_box1_node {
            width: 30rem;
            height: 2rem;
            background-color: #1B242F;
            border-radius: 0.5rem 0rem  0rem 0.5rem;
        }

        .conter_auto {
            width: 93rem;
            height: 50rem;
            margin: 0rem auto;
        }

        .main {
            background-color: #418BCA;
            padding-bottom: 10rem;
        }

        clearfix::before {
            content: "";
            display: block;
            clear: both;
        }

        .main_box {
            margin: 0 auto;
            width: 94rem;
        }

        .main h1 {
            padding-top: 5rem;
            margin: 0 auto;
            font-size: 5rem;
            height: 11.7rem;
            width: 10.2rem;
        }

        .main_t1 img {
            width: 23rem;
            height: 18rem;
            margin-bottom: 1rem;
            margin-right: 0.1rem;
        }

        .main_t2 img {
            width: 23rem;
            height: 18rem;
            margin-right: 0.1rem;
        }

        .footer_box {
            background-color: #16A085;
            position: relative
        }

        .footer_box_shang {
            width: 25rem;
            margin: 0 auto;
            padding-bottom: 3rem;
        }

        .footer_box_lianxi {
            background-color: #000;
            padding-bottom: 3rem;
        }

        .footer h1 {
            font-size: 5rem;
            width: 25rem;
            height: 5.7rem;
            text-align: center;
            padding-top: 5rem;
            margin-bottom: 5rem;
        }

        .footer_box_lianxi .p1 {
            background-image: url("images/spr.png");
            background-repeat: no-repeat;
            width: 3.1rem;
            height: 8.6rem;
            float: left;
            margin-top: 3rem;
            margin-left: 5rem;
        }

        .footer_box_lianxi p {
            font-size: 1.4rem;
            padding-top: 0.2rem;

            margin-left: 4rem;
        }

        .footer_box_lianxi .p2 {
            padding-top: 3.2rem;
        }

        .footer_box_lianxi_t2 {
            background-image: url("images/img-sprite.png");
            background-repeat: no-repeat;
            width: 14.8rem;
            height: 3.8rem;
            background-position: 0rem 0.2rem;
            margin-left: 5rem;
        }

        .input_box {
            width: 63rem;
            height: 20rem;
            margin: 0 auto;
        }

        .input_box2 {
            width: 30rem;
            height: 11rem;
            float: left;
            margin-right: 2rem;
        }

        .input_box2 input {
            width: 30rem;
            height: 3rem;
        }

        .input_box3 input {
            width: 30rem;
            height: 7rem;
            float: left;
        }

        .input_box3 button {
            width: 8rem;
            height: 3rem;
            font-size: 1rem;
            text-align: center;
            margin-top: 2rem;
            background-color: #3F4E62;
            border: none;
            color: #fff;
        }
        /*#tankuan{
            width: 22rem;
            height: 18rem;
            background-color:red;
            position: absolute;
            left: 10%;
            top: 418%;
            font-size:1.4rem;
        }
        #tankuan p:first-child{
            margin-top: 3rem;
        }
         #tankuan p{
             margin-left: 3rem;
         }*/
    </style>
</head>

<body>
    <div class="header">
        <h1>简历</h1>
        <div class="p1">大家好，我是李明</div>
        <div class="p2">希望大家更了解我</div>
    </div>
    <div class="content clearfix">
        <div class="top"></div>
        <h1>我的技能</h1>
        <div class="conter_auto">
            <div class="main_bg">
                <h2>Html</h2>
                <div class="main_box1">
                    <div class="main_box1_html"></div>
                </div>
                <h2>Css</h2>
                <div class="main_box1">
                    <div class="main_box1_css"></div>
                </div>
                <h2>Javascript</h2>
                <div class="main_box1">
                    <div class="main_box1_js"></div>
                </div>
                <h2>Php</h2>
                <div class="main_box1">
                    <div class="main_box1_php"></div>
                </div>
            </div>
            <div class="main2">
                <h2>Vue</h2>
                <div class="main_box1">
                    <div class="main_box1_vue"></div>
                </div>
                <h2>Html5</h2>
                <div class="main_box1">
                    <div class="main_box1_html5"></div>
                </div>
                <h2>Jquery</h2>
                <div class="main_box1">
                    <div class="main_box1_jquery"></div>
                </div>
                <h2>Node.js</h2>
                <div class="main_box1">
                    <div class="main_box1_node"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="main_box">
            <h1>作品</h1>
            <div class="main_t1">
                <img src="images/2.JPG" />
                <img src="images/3.JPG" />
                <img src="images/4.JPG" />
                <img src="images/7.JPG" />
            </div>
            <div class="main_t2">
                <img src="images/2.JPG" />
                <img src="images/3.JPG" />
                <img src="images/7.JPG" />
                <img src="images/13.JPG" />
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="footer_box">
            <div class="footer_box_shang">
                <h1>联系我</h1>
                <div class="footer_box_lianxi">
                    <p class="p1"></p>
                    <p class="p2">李明</p>
                    <p>0123456</p>
                    <p>liming@123.com</p>
                    <div class="footer_box_lianxi_t2"></div>
                </div>
            </div>
            <div class="input_box">
                <div class="input_box2">
                    <input type="text" placeholder="name" class="username"/></p>
                    <input type="text" placeholder="email" class="email"/></p>
                    <input type="text" placeholder="subject" class="subject"/>
                </div>
                <div class="input_box3">
                    <input type="text" placeholder="信息"  class="xinxi"/>
                    <button>提交</button>
                </div>
            </div>
        </div>
       
    </div>
    <!--<div class="tankuan">
        <p>姓名:</p>
        <p>email:</p>
        <p>subject:</p>
        <p>信息:</p>
        </div>-->

</body>
    <script>
        window.onload=function(){
        var btn=document.querySelector("button");
        btn.addEventListener("click",function(){
        
        var username=document.getElementsByClassName("username");
        console.log("名字："+username[0].value);
        var email=document.getElementsByClassName("email");
        console.log("邮箱："+email[0].value);
        var subject=document.getElementsByClassName("subject");
        console.log("课程："+subject[0].value);
         var xinxi=document.getElementsByClassName("xinxi");
        console.log("留言信息："+xinxi[0].value);
        })

        }
        
    </script>
</html>